<template>
    <div> <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <span>This is a message</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        Confirm
                    </el-button>
                </span>
            </template>
        </el-dialog></div>
</template>
  
<script>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';
export default {
    name: "SysMenuFormDialog",
    data() {
        return {
            dialogVisible: false
        };
    },
    methods: {
        showDialog() {
            this.dialogVisible = true;
        },
        handleClose(done) {
            done();
        }

    }
}


</script>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>